doctype. Um nó do elemento raiz e zero ou mais comentários ou instruções de processamento; o elemento raiz serve como raiz da árvore de elementos do documento. Figura 1: Exemplo estrutura DOM
| Fonte: Autoria própria |
Figura 2: Exemplo Box model padrão do CSS
| Fonte: Autoria própria |
element width trata do tamanho do conteúdo do elemento, não considerando seu padding e border (e a mesma coisa com a altura). #elemento {
border: 10px solid #555;
width: 50%;
}
box-sizing que considera o tamanho final do elemento, considerando o padding e border. box-sizing¶box-sizing: content-box. Valores possíveis:
border-box: width = border + padding). content-box: width = element width). Observação:
/* Valor padrão */
#elemento {
box-sizing: content-box;
}
#elemento {
box-sizing: border-box;
}
box-sizing: border-box; Arquivo index.html
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
Arquivo estilo.css
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: border-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Figura 3: Exemplo Box model com a propriedade box-sizing: border-box
| Fonte: Autoria própria |
<div> com o atributo class="item"¶border-box: width = border + padding). box-sizing: border-box; width: 250px; height: 100px; 250px.Figura 4: Representação do CSS no Box Model de um elemento (class="item")
| Fonte: Autoria própria |
box-sizing: content-box;¶Arquivo index.html
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
Arquivo estilo.css
/* Arquivo css/estilo.css */
/* propriedades css para formatação do identificador content */
#content {
background-color: #2e86c1; /* propriedade para cor de fundo */
height: 600px; /* propriedade para altura de conteúdo */
width: 600px; /* propriedade para largura de conteúdo */
padding: 5px; /* propriedade para espaçamento ao redor do conteúdo */
}
.item {
width: 250px; /* propriedade para largura do conteúdo */
height: 100px; /* propriedade para altura do conteúdo */
box-sizing: content-box; /* propriedade para tamanho do conteúdo */
border: 2px solid red; /* propriedade para borda do conteúdo */
padding: 10px; /* propriedade para espaçamento ao redor do conteúdo */
margin: 10px; /* propriedade para margens ao redor do conteúdo */
color: #000; /* propriedade para cores do texto do conteúdo */
font-weight: bold; /* propriedade para negrito do texto do conteúdo */
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5); /* propriedade para sombra do conteúdo */
background-color: #fff; /* propriedade para cor de fundo do conteúdo */
}
Figura 5: Exemplo Box model com a propriedade box-sizing: content-box
| Fonte: Autoria própria |
<div> com o atributo class="item"¶content-box: width = element width).box-sizing: content-box;width: 250px;height: 100px; 250px + 20px + 4px, totalizando 274px.Figura 6: Representação do CSS no Box Model de um elemento (class="item")
| Fonte: Autoria própria |
Figura 7: Resumo Comparativo
| 2.1.1 border-box | 2.1.2 content-box | ||
|---|---|---|---|
| box-sizing: border-box; width: 250px; height: 100px; | box-sizing: content-box; width: 250px; height: 100px; | ||
| Largura Final = 250px | Largura Final = 250px + 20px + 4px = 274px | ||
| Fonte: Autoria própria | Fonte: Autoria própria |
margin¶/* Exemplo 1 */
#elemento {
margin: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
margin: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
margin: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
margin: top right bottom left;
}
Figura 8: Exemplos utilizando a proproedade margin
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| margin: 10px; | margin: 10px 8px; | margin: 10px 8px 6px; | margin: 10px 8px 6px 12px; |
| Fonte: Autoria própria | Fonte: Autoria própria | Fonte: Autoria própria | Fonte: Autoria própria |
padding¶/* Exemplo 1 */
#elemento {
padding: top/bottom/right/left;
}
/* Exemplo 2 */
#elemento {
padding: top/bottom right/left;
}
/* Exemplo 3 */
#elemento {
padding: top right/left bottom;
}
/* Exemplo 4 */
#elemento {
padding: top right bottom left;
}
Figura 8: Exemplos utilizando a propriedade padding
| Exemplo1 | Exemplo2 | Exemplo3 | Exemplo4 |
|---|---|---|---|
| padding: 10px; | padding: 10px 8px; | padding: 10px 8px 6px; | padding: 10px 8px 6px 12px; |
| Fonte: Autoria própria | Fonte: Autoria própria | Fonte: Autoria própria | Fonte: Autoria própria |
position¶Atualmente está sendo pouco usado. Porém, é utilizada nos frameworks de CSS.
Para aprofundamento, consulte MDN Web Docs.
static: relative: absolute: fixed: float¶Ou ainda o artigo CSS: Truques para dominar a propriedade Float.
A propriedade Float é:
float: left;#elemento {
float: left;
}
clear.clear: Limpa a formatação dos elementos que usaram float. Arquivo index.html
<!-- Exemplo index.html sem float -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
Figura 9: Sem utilizar a propriedade float
| Fonte: Autoria própria |
Arquivo index.html
<!-- Exemplo index.html COM float -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float</title>
<style>
.tudo {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
}
/* Inclusão do FLOAT */
.menu {
float: left;
width: 30%;
}
.conteudo {
float: right;
width: 60%;
}
</style>
</head>
<body>
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>
</body>
</html>
classe menu passou a ter 30%, e a classe conteúdo 60%, totalizando 90% da largura total que é 600px. Figura 10: Utilizando a propriedade float
| Fonte: Autoria própria |
visibility¶visible: hidden: collapse: /* Código omitido para facilitar a visualização da modificação */
.menu {
float: left;
width: 30%;
visibility: hidden;
}
/* Código omitido para facilitar a visualização da modificação */
visiility: hidden, o que fez ocultar a classe, porém permite a reserva do espaço, não sendo preeenchido com nada. collapse, então seu espaço poderá ser preenchido.Figura 11: Utilizando a propriedade visibility
| Fonte: Autoria própria |
outline¶outline-color: valor; outline-style: valor; outline-width: valor; ou outline: outline-color outline-style outline-width; Exemplo:
#elemento {
outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
.menu, .conteudo {
height: 100px;
width: 250px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #ffffff;
margin: 10px;
outline: rgba(0, 0,107,.65) solid 5px;
}
/* Código omitido para facilitar a visualização da modificação */
Figura 12: Utilizando a propriedade outline: rgba(0, 0,107,.65) solid 5px
| Fonte: Autoria própria |
display¶inline: block: none: visibility: hidden; você esta indicando ao browser para esconder o elemento. inline-block: list-item: flex: Arquivo index.html
<!-- Exemplo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula04</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<h1> IFSP - Bragança Paulista </h1>
<div id="content">
<div class="item">01</div>
<div class="item">02</div>
<div class="item">03</div>
<div class="item">04</div>
</div>
</body>
</html>
Arquivo estilo.css
/* Exemplo estilo.css */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 13: Exemplo de estrutura básica sem formatação de display
| Fonte: Autoria própria |
display: flex;¶display: flex no identificador #content. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade display: flex */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 14: Visualização com uso da propriedade display: flex
| Fonte: Autoria própria |
flex-direction¶Valores possíveis:
row: column: row-reverse: column-reverse: flex-direction: row no identificador #content. Utilizando a propriedade flex-direction : row;
Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 15: Visualização com uso da propriedade flex-direction: row
| Fonte: Autoria própria |
flex-direction : column; Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 16: Visualização com uso da propriedade flex-direction: column
| Fonte: Autoria própria |
flex-direction : row-reverse; Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 17: Visualização com uso da propriedade flex-direction: row-reverse
| Fonte: Autoria própria |
flex-direction : column-reverse; Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: column-reverse;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 18: Visualização com uso da propriedade flex-direction: row-reverse
| Fonte: Autoria própria |
flex-wrap¶nowrap: wrap-reverse: #elemento {
flex-flow: flex-direction flex-wrap;
}
flex-wrap: nowrap; flex-wrap: nowrap no identificador #content. flex-direction: row. Pois os itens filhos são ajustados dentro do espaço para não quebrarem. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 19: Visualização com uso da propriedade flex-wrap: nowrap
| Fonte: Autoria própria |
flex-wrap: wrap; largura (width: 100px) na classe .item, para width: 250px. flex-wrap: nowrap no identificador #content para flex-wrap: wrap.Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap; /* Modificado de nowrap para wrap */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 20: Visualização com uso da propriedade flex-wrap: wrap
| Fonte: Autoria própria |
flex-wrap: wrap-reverse; e flex-direction: row; Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: row;
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 21: Visualização com uso da propriedade flex-wrap: wrap-reverse e flex-direction: row
| Fonte: Autoria própria |
flex-wrap: wrap-reverse; e flex-direction: column-reverse;flex-direction: row para a propriedade flex-direction: column-reverse. flex-wrap: wrap-reverse. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
flex-direction: column-reverse; /* Modificado de wrap para column-reverse */
flex-wrap: wrap-reverse; /* Modificado de wrap para wrap-reverse */
}
.item {
width: 250px; /* Modificado de 100px para 250px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 22: Visualização com uso da propriedade flex-wrap: wrap-reverse e flex-direction: column-reverse
| Fonte: Autoria própria |
justify-content¶Valores possíveis:
flex-start: flex-end: space-around: space-between: Ou usar:
#elemento {
justify-content: flex-start;
}
flex-wrap: wrap; e flex-direction: row; e justify-content: flex-start;largura (width: 250px) na classe .item, para width: 100px. largura (width: 600px) no identificador #content, para width: 900px.flex-direction para row. flex-wrap para wrap. justify-content: flex-start. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px; /* Modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row; /* Modificado de column-reverse para row */
flex-wrap: wrap; /* Modificado de wrap-reverse para wrap */
justify-content: flex-start; /* Inserido */
}
.item {
width: 100px; /* modificado de 250px para 100px */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 23: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: flex-start
| Fonte: Autoria própria |
flex-wrap: wrap; e flex-direction: row; e justify-content: flex-end;justify-content: flex-start para justify-content: flex-end. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end; /* Modificado de flex-start para flex-end */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 24: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: flex-end
| Fonte: Autoria própria |
flex-wrap: wrap; e flex-direction: row; e justify-content: space-around;justify-content: flex-end para justify-content: space-around. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around; /* Modificado de flex-end para space-around */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 25: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: space-around
| Fonte: Autoria própria |
flex-wrap: wrap; e flex-direction: row; e justify-content: space-between;justify-content: space-around para justify-content: space-between. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 900px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; /* Modificado de space-around para space-between */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 26: Visualização com uso da propriedade flex-wrap: wrap e flex-direction: row e justify-contet: space-between
| Fonte: Autoria própria |
align-items¶flex-start: flex-end: center: strech: baseline: #elemento {
align-items: flex-start;
}
align-items: flex-start;justify-content: space-between; no identificador #content, para justify-content: flex-start;. largura do identificador #content de 900px para width: 600px.align-items: flex-start. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px; /* Modificado de 900px para 600px */
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; /* Modificado de space-between para flex-start */
align-items: flex-start; /* Inserido */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 27: Visualização com uso da propriedade align-items: flex-start
| Fonte: Autoria própria |
align-items: flex-end;Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-end; /* Modificado de flex-start para flex-end */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 28: Visualização com uso da propriedade align-items: flex-end
| Fonte: Autoria própria |
align-items: center;align-items: flex-end; para align-items: center;. Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center; /* Modificado de flex-end para center */
}
/* .item foi omitido para facilitar o entendimento, não foi modificado */
Figura 29: Visualização com uso da propriedade align-items: center
| Fonte: Autoria própria |
align-items: strech;align-items: center; para align-items: strech;. altura (height: 100px) da classe .item.Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: strech; /* Modificado de center para strech */
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 30: Visualização com uso da propriedade align-items: strech
| Fonte: Autoria própria |
align-items: baseline;align-items: strech; para align-items: baseline;. altura (height: 100px) da classe .item.Arquivo index.html
<!-- Arquivo index.html omitido para facilitar o entendimento, não foi modificado. -->
Arquivo estilo.css
/* Arquivo estilo.css foi inserido a propriedade */
#content {
background-color: #2e86c1;
height: 600px;
width: 600px;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: baseline; /* Modificado de strech para baseline */
}
.item {
width: 100px; /* height removido */
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
Figura 31: Visualização com uso da propriedade align-items: baseline
| Fonte: Autoria própria |
order¶.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Importante:
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
#content {
background-color: #2e86c1;
height: 600px;
width: 600px; /* modificado de 600px para 900px */
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
}
.item:nth-child(1) {
order: 4;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Figura 32: Visualização com uso da propriedade order
| Fonte: Autoria própria |
flex-grow¶flex-shrink¶flex-grow: 0; e flex-shrink: 1; e flex-basis: auto;.item, definindo os valores default para as 3 propriedades e removendo width da classe .item**. flex-grow:2; na primeira pseudo-classe. .item da seguinte forma:Arquivo estilo.css
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: auto; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Figura 33: Visualização com uso da propriedade flex-grow e flex-shrink e flex-basis
| Fonte: Autoria própria |
flex-grow: 0; e flex-shrink: 1; e flex-basis: auto;.item, modifique o valor da propriedade flex-basis: auto; para flex-basis: 65px;, assim os elementos serão definidos nesta largura e o espaço restante é usado nos elementos que foram configurados com a propriedade flex-grow..item da seguinte forma:Arquivo estilo.css
.item {
/* width: 100px; removido */
height: 100px;
margin: 10px;
color: #000;
font-weight: bold;
box-shadow: 0px 5px 8px rgba(0, 0, 25, 0.5);
background-color: #fff;
flex-grow: 0; /* inserido */
flex-shrink: 1; /* inserido */
flex-basis: 65px; /* inserido */
}
.item:nth-child(1) {
order: 4;
flex-grow: 2; /* inserido */
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
.item:nth-child(4) {
order: 2;
}
Figura 34: Visualização com uso da propriedade flex-grow e flex-shrink e flex-basis
| Fonte: Autoria própria |
Para ampliar o conhecimento, consulte o artigo CSS Grid: One Layout, Multiple Ways.
De acordo com [CSS-TRICKS], "o CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, o que significa que pode lidar com colunas e linhas, ao contrário do flexbox, que é amplamente um sistema unidimensional. Você poderá trabalhar com o Grid Layout aplicando regras CSS tanto a um elemento pai (que se torna o Grid Container) quanto aos filhos desse elemento (que se tornam Grid Items".
Para aprofundamento no assunto, sugiro a leitura do Guia completo do CSS-GRID.
ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.